<template lang="pug">
.top-bar(:style="warpStyle")
  .nav-bar.pl-4(:style="navBarSyle")
    .icon(@click="navi('/pages/user/settings')")
      image.w-full.h-full(v-if="isTop" src="@/assets/setting-white.svg" mode="aspectFit")
      image.w-full.h-full(v-else src="@/assets/setting-dark.svg" mode="aspectFit")
    .title(:style="{color:isTop?'#F8F9F3':'#2c2c2c'}") 我的
.header-back
  .user-info.flex.items-center.gap-4(v-if="user?.phonenumber")
    .w-16.h-16.bg-gray-800.rounded-full.p-3
      image.w-full.h-full(src="@/assets/avatar-default.svg" mode="aspectFit")
    .text-white 欢迎 {{ phoneMask(user?.phonenumber) }}
  .user-info.flex.items-center.gap-4(@click="toLogin" v-else)
    .w-16.h-16.bg-gray-800.rounded-full.p-3
      image.w-full.h-full(src="@/assets/avatar-default.svg" mode="aspectFit")
    .text-white 登陆/注册
.top-btns
  .icon-btn
    image(src="@/assets/baojia.svg" mode="aspectFit")
    .text 报价单
  .icon-btn
    image(src="@/assets/hetong.svg" mode="aspectFit")
    .text 我的合同 
  .icon-btn(@click="navi(`/pages/user/kehu`)")
    image(src="@/assets/kehu.svg" mode="aspectFit")
    .text 客户管理

.mx-6.mt-8.mb-2.text-lg 常用功能
.divider.mx-4.mb-4
.grid.grid-cols-4.gap-5.px-8
  .icon-btn(@click="invoice")
    image(src="@/assets/fapiao.svg" mode="aspectFit")
    .text 发票抬头 
  .icon-btn(@click="address")
    image(src="@/assets/address.svg" mode="aspectFit")
    .text 地址管理 
</template>
<script setup lang="ts">
import { useSystemInfo } from "@/stores/systemInfo";
import { StyleValue, computed,ref } from 'vue'
import {phoneMask} from '@/utils/tools'
import { useUser } from "@/stores/user";

const { user } =useUser()

const isTop = ref(true)
const systemInfo = useSystemInfo();
const { navBarInfo,safeArea } = storeToRefs(systemInfo)
const warpStyle = computed<StyleValue>(() => {
  const {navBarHeight} = navBarInfo.value
  const {top } = safeArea.value;
  return {
    height:`${navBarHeight}px`,
    paddingTop:`${top}px`,
    backgroundColor:isTop.value?'transparent':'white',
  }
})
const navBarSyle = computed<StyleValue>(() => {
  const {menuHeight,menuTop,maxWidth} = navBarInfo.value
  return {
    height:menuHeight+10+'px',
    top:`${menuTop}px`,
    width:`${maxWidth}px`
  }
})
onPageScroll((ev)=>{
  if (ev.scrollTop <= 10) {
     isTop.value = true
    } else{
      isTop.value = false
  }
})
function toLogin(){
  uni.navigateTo({
    url:'/pages/login/reg'
  })
}
function invoice(){
  uni.chooseInvoiceTitle({
    success(res){
      console.log(res);
    }
  })
}
function address(){
  uni.chooseAddress({
    success(res){
      console.log(res);
    }
  })
}
function navi(url:string){
  uni.navigateTo({
    url:url
  })
}
</script>
<style scoped lang="scss">

.top-bar{
  @apply fixed w-full top-0  z-50 transition-all;
}
.nav-bar{
  @apply flex items-center  absolute bg-transparent text-sm;
  .title{
    @apply pl-[calc(50vw-4em)]
  }
  .icon{
    @apply w-6 h-6 
  }
}
.header-back{
  @apply h-[40vh] w-full bg-prim relative;

  .user-info{
    @apply absolute bottom-[20px] w-full px-5;
  }
}
.top-btns{
  @apply mx-6 bg-[#FFFFFB] shadow-sm grid grid-cols-4 py-4;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.icon-btn{
  @apply flex flex-col items-center;
  image{
    @apply w-8 h-8 mb-1;
  }
  .text{
    @apply text-xs text-gray-700
  }
}
.divider{
  @apply h-[1px] bg-gray-400;
}
</style>